<style include="cr-shared-style cr-icons shared-style">
  #site-list-header-container {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  #no-sites {
    color: var(--cr-secondary-text-color);
    margin: var(--cr-section-padding);
  }

  .site-row {
    align-items: center;
    display: flex;
    height: var(--cr-section-min-height);
    margin-inline-start: 24px;
  }

  #sites-list {
    margin: 12px 0;
  }

  .site {
    flex-grow: 1;
    margin: 0 calc(var(--cr-section-padding) + var(--cr-icon-ripple-margin));
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .separator {
    margin: 0 calc(
        var(--cr-section-padding) + var(--cr-icon-ripple-margin));
  }
</style>
<div id="site-list-header-container">
  <span>[[header]]</span>
  <cr-button id="addSite" on-click="onAddSiteClick_">$i18n{add}</cr-button>
</div>
<div id="no-sites" hidden$="[[hasSites_(sites)]]">$i18n{noSitesAdded}</div>
<div id="sites-list" hidden$="[[!hasSites_(sites)]]">
  <template is="dom-repeat" items="[[sites]]">
    <div class="site-row">
      <div class="site-favicon"
          style$="background-image:[[getFaviconUrl_(item)]]"></div>
      <span class="site">[[item]]</span>
      <cr-icon-button class="icon-more-vert no-overlap" on-click="onDotsClick_">
      </cr-icon-button>
    </div>
  </template>
</div>

<cr-action-menu id="siteActionMenu">
  <button class="dropdown-item" id="edit-site-url"
      on-click="onEditSiteUrlClick_">
    $i18n{sitePermissionsEditUrl}
  </button>
  <button class="dropdown-item" id="edit-site-permissions"
      on-click="onEditSitePermissionsClick_">
    $i18n{sitePermissionsEditPermissions}
  </button>
  <button class="dropdown-item" id="remove-site"
      on-click="onRemoveSiteClick_">
    $i18n{remove}
  </button>
</cr-action-menu>

<template is="dom-if" if="[[showEditSiteUrlDialog_]]" restamp>
  <site-permissions-edit-url-dialog
      delegate="[[delegate]]"
      site-to-edit="[[siteToEdit_]]"
      site-set="[[siteSet]]"
      on-close="onEditSiteUrlDialogClose_">
  </site-permissions-edit-url-dialog>
</template>

<template is="dom-if" if="[[showEditSitePermissionsDialog_]]" restamp>
  <site-permissions-edit-permissions-dialog
      delegate="[[delegate]]"
      site="[[siteToEdit_]]"
      original-site-set="[[siteSet]]"
      on-close="onEditSitePermissionsDialogClose_">
  </site-permissions-edit-permissions-dialog>
</template>
